<div id="FormBuilderContainer">
						<div id="FormBuilderToolbar" class='tabs'>
							<ul>
								<li><a href="#FormBuilderToolbarBasic">Fields</a></li>
								<li><a href="#FormBuilderToolbarForm">Form</a></li>
								<li><a href="#FormBuilderToolbarActions">Save</a></li>
							</ul>
							<div id="FormBuilderToolbarActions">
								<a href="#builderCode" onclick="formBuilderIni('ini');">Ini Files</a> | 
								<a href="#builderCode" onclick="formBuilderIni('xml');">Xml Files</a>
							</div>
							<div id="FormBuilderToolbarForm">
								<a href="#builderCode" onclick="formBuilderIni('ini');">Ini Files</a> | 
								<a href="#builderCode" onclick="formBuilderIni('xml');">Xml Files</a>
							</div>
							<div id="FormBuilderToolbarBasic">
							<?php 	
								echo "<ul id='menu_buttons'>";
									echo "<li class='tooltip input-button' title='Button'>Button</li>";
									echo "<li class='tooltip input-checkbox' title='Checkbox'>Checkbox</li>";
									echo "<li class='tooltip input-multicheckbox' title='MultiCheckbox'>MultiCheckbox</li>";
									echo "<li class='tooltip input-hidden' title='Hidden'>Hidden</li>";
									echo "<li class='tooltip input-image' title='Image'>Image</li>";
									echo "<li class='tooltip input-text' title='Input'>Input</li>";
									echo "<li class='tooltip input-submit' title='Submit'>Submit</li>";
									echo "<li class='tooltip input-password' title='Password'>Password</li>";
									echo "<li class='tooltip input-radio' title='Radio'>Radio</li>";
									echo "<li class='tooltip input-radio_group' title='RadioGroup'>RadioGroup</li>";
									echo "<li class='tooltip select-select' title='Select'>Select</li>";
									echo "<li class='tooltip textarea-textarea' title='Textarea'>Textarea</li>";
									echo "<li class='tooltip input-file' Title='Upload'>Upload</li>";
								echo "</ul>";
							?>
							</div>
						</div>
					<br />
						<div class='tabs'>
							<ul>
								<li><a href="#builder">Builder</a></li>
							</ul>
							<div id="builder">
								<form action="" id="BuilderFormContainer">
										<ul class='BuilderTopBar'>
											<li class="clear">
												<div class="element_name"><label>Field Name</label></div>
												<div class="element_label">Field</div>
													<div class="element_options">
													Actions
												</div>
												<div class="clear"></div>
											</li>
										</ul>
									<div id="builder_container">
										<ul id="builder_form" class="builder_form">
										<?php
											if( $this->form ){
												echo $this->form;
												?>
												<?php 
											} else {
												echo "<p class='description'> Drag and drop the fields here</p>";
											}
										?>
											
										</ul>
									</div>
								</form>	
								<div class='clear'></div>
							</div>
					
						</div>	
						<div id="dialog"></div>
								
						<div id="dialogs_contents" style="display:none">
							<!-- ADD ELEMENT -->
							<div id="dialog_add_element">
								<form action="" id="form_add_element" class='form'>
									<input value="" type="hidden" name="element_tag" id="element_tag" class="{validate:{required:true}}" />
									<input value="" type="hidden" name="element_action_mode" id="element_action_mode" class="" />
									<div>
										<label for="element_name">Field Type: </label> 
										<select name="element_type" id='element_type' class="{validate:{required:true}}">
											<option value='button'>Button</option>
											<option value='checkbox'>Checkbox</option>
											<option value='multicheckbox'>MultiCheckbox</option>
											<option value='hidden'>Hidden</option>
											<option value='image'>Image</option>
											<option value='text'>Input</option>
											<option value='submit'>Submit</option>
											<option value='password'>Password</option>
											<option value='radio'>Radio</option>
											<option value='radio_group'>RadioGroup</option>
											<option value='select-select'>Select</option>
											<option value='textarea-textarea'>Textarea</option>
											<option value='file'>Upload</option>
										</select>
										<br clear="all" />
									</div>					
									<div>
										<label for="element_name">Nome: </label> <input value="teste" type='text' name='element_name' id='element_name' class="{validate:{required:true}}" />
										<br clear="all" />
									</div>
									<div>
										<label for="element_label">Label: </label> <input value="teste" type='text' name='element_label' id='element_label' class="{validate:{required:true}}" />
										<br clear="all" />
									</div>
									<div>
										<label for="element_description">Description: </label> <input type='text' name='element_description' id='element_description' />
										<br clear="all" />
									</div>
									<!-- TABS -->
									<div class="tabs">
										
										<ul>
											<li><a href="#validations">Validations</a></li>
											<li><a href="#params">Extra params</a></li>
										</ul>
					
										<!-- PARAMS -->
										<div id="params">
											<ul>
											</ul>
											<br clear='all'/>
											<a href="#" class="button add add_param">Add param</a>
										</div>
										<!-- PARAMS END -->
					
										<!-- OPTIONS -->
										<div id="options" style="display:none;">
											<ul>
											</ul>
											<br clear='all'/>
											<a href="#" class="button add add_option">Add option</a>
										</div>
										<!-- OPTIONS END -->
										
										<!-- VALIDATIONS -->
										<div id="validations">
											<div>
												<label class='label'>Type:</label> 
												<select id='validation_type' class="FormBuilderAddValidation" >
													<option value=''>Select a validation</option>
													<option value='required'>Required</option>
													<option value='alphanumeric'>Alphanumeric</option>
													<option value='alpha'>Alpha</option>
													<option value='range'>Between (Number)</option>
														<optgroup label="">
															<option value='min'>Min Number</option>
															<option value='max'>Max Number</option>
														</optgroup>
													<option value='rangelength'>String Length ( Between )</option>
													<optgroup label="">
														<option value='minlength'>Min String Length</option>
														<option value='maxlength'>Max String Length</option>
													</optgroup>
													<!-- <option value='number'>Is Number</option> -->
													<option value='digits'>Digits</option>
													<option value='email'>Email</option>
													<option value='url'>Hostname</option>
													<option value='date'>Date</option>
													<option value='time'>Time</option>
													<option value='creditcard'>Credit Card</option>
													<option value='equalTo'>Equal to</option>
													<option value='float'>Float</option>
													<option value='hex'>Hex</option>
													<option value='iban'>Iban</option>
													<option value='ip'>Ip</option>
													<option value='notempty'>NotEmpty</option>
													<!-- <option value='regex'>Regex</option>  -->
												</select>
												<!-- <select id='validation_type' class="FormBuilderAddValidation" >
													<option value=''>Select a validation</option>
													|<option value='required'>Required</option>
													<option value='remote'>Remote file validation</option>
													|<option value='rangelength'>String Length ( Range)</option>
													|<option value='minlength'>Min String Length</option>
													|<option value='maxlength'>Max String Length</option>
													|<option value='number'>Is Number</option>
													|<option value='range'>Range Number</option>
													|<option value='min'>Min Number</option>
													|<option value='max'>Max Number</option>
													|<option value='digits'>Digits</option>
													|<option value='email'>Email</option>
													|<option value='url'>Url</option>
													|<option value='date'>Date</option>
													|<option value='time'>Time</option>
													|<option value='creditcard'>Credit Card</option>
													<option value='accept'>Upload Extensions</option>
													|<option value='equalTo'>Equal to</option>
													<option value='rangeWords'>Range of number of words</option>
													<option value='maxWords'> Max number of words</option>
													<option value='minWords'>Min number of words</option>
													|<option value='alphanumeric'>Alphanumeric</option>
													|<option value='alpha'>Alpha</option>
													<option value='lettersonly'>Letters Only</option>
													<option value='nowhitespace'>No white space</option>
													<option value='ziprange'>Zip code range</option>
												</select> -->
												<input type='button' value="Add"  class="FormBuilderAddValidationButton" />
											</div>
											<br clear=all />
											<ul id="validatorContainer" class='list'></ul>
										</div>
										<!-- VALIDATIONS END-->
					
									</div>
									<!-- TABS END -->
								</form>
							</div>
						</div>
					</div>
					<script>
					/* Tooltip */

					$(function() {
						
						$('#FormBuilderContainer').formBuilder();
						$('.tabs').tabs();
						
						$('.tooltip').tooltip({
							track: true,
							delay: 0,
							showURL: false,
							showBody: " - ",
							fade: 250
						});
					});
					</script>